<template>
    <div class="search">
        <header class="searchtop">
            <!-- <van-search v-model="value" show-action placeholder="换季收纳好物特惠" @search="onSearch(value)" @cancel="onCancel" /> -->
            <div class="search1">
                <van-icon name="search" />
                    <input type="text" :placeholder="intitle" v-model="value" @input="onInputEvent" @keyup.enter="searchtext">
                <van-icon @click="clearn" name="close" />
            </div>
            <span @click="onCancel">取消</span>
        </header>
        <div class="suggestion" v-show="isShowSuggestion">
            <ul>
                <router-link class="col" :to="{ path: '/goodslist', query: { keyword: val } }"
                    v-for="(val, index) in searchlist" :key="index" tag="li" v-slot="{ navigate }">
                    <span @click="navigate">{{ val }}</span>
                </router-link>
            </ul>
        </div>

        <div class=" msearchSuggestionsViews" v-show="!isShowSuggestion">
            <div class="search_hot" v-if="showHistory">
                <div class="title">历史记录</div>
                <!-- <div class="list">
                    <div class="searchtag"></div>
                </div> -->
                <div class="title">
                    <van-row gutter="">
                        <van-tag v-for="item in historylist" plain type="primary">{{ item }}</van-tag>
                    </van-row>
                </div>

            </div>
            <div class="kong"></div>
            <div class="search_hot">
                <div class="title">热门搜索</div>
                <div class="list">
                    <div class="title">
                    <van-row gutter="">
                        <van-tag v-for="item in hotlist" plain type="primary">{{ item.keyword }}</van-tag>
                    </van-row>
                </div>
                </div>
            </div>
        </div>



    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { reqGoodsList, wyGoodsList,wyGoodsListinit} from '@/api/search';
import { useRouter } from 'vue-router';

const router = useRouter()
const value = ref<string>()
const historylist = ref<any>([])
const intitle = ref()
const hotlist= ref()
const searchParams = {
    categoryName: "",
    keyword: "华为",
    trademark: "", // "4:小米"
    props: [], // ["1:1700-2799:价格"]
    order: "1:desc", // "1:desc" 默认排序规则     1 代表的是综合排序    2 代表的是价格排序     desc 降序      asc 升序
    pageNo: 1,
    pageSize: 2,
}
const searchwyParams = {
    keywordPrefix: "",
}
const clearn = () => {
    value.value = ''
    isShowSuggestion.value = false

}
const showHistory = ref(true)
const isShowSuggestion = ref(false)
type DebounceFn = (...args: any[]) => void;
//防抖
function debounce(fn: DebounceFn, delay: number): () => void {
    let timeoutId: ReturnType<typeof setTimeout>;

    return function (this: any, ...args: any[]) {
        const context = this;

        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {
            fn.apply(context, args);
        }, delay);
    };
}

const onInputEvent = debounce(event => {

    // searchParams.keyword = event.target.value
    // text()
    searchwyParams.keywordPrefix = event.target.value
    text1()
}, 500);
const onCancel = () => {
    router.go(-1)
}
const searchlist = ref()
const form = new FormData()

const searchtext = () => {
    const str: any = value.value
    historylist.value.push(str)
}
const text = async () => {
    try {

        let res = await reqGoodsList(searchParams)
        const result: any = res
        const result3 = result.goodsList
        const result1 = result3.map((item: { id: number; title: string; }) => {
            return {
                id: item.id,
                title: item.title.replace(/<font color='red'>|<\/font>/g, "")
            }
        });
        searchlist.value = result1
        if (searchlist.value) {
            isShowSuggestion.value = true
        }
    } catch (error) {
        console.log(error);
    }


    // console.log(searchlist.value);

}

const text1 = async () => {
    try {
        form.append('keywordPrefix',value.value!)
        form.set('keywordPrefix',value.value!)
        console.log(form.get('keywordPrefix'));

        let res = await wyGoodsList(form)
        const result: any = res
        searchlist.value = result
        console.log(searchlist.value);
        
        if (searchlist.value) {
            isShowSuggestion.value = true
        }
    } catch (error) {
        console.log(error);
    }


    // console.log(searchlist.value);

}
const init = async()=>{
    try {
        let res = await wyGoodsListinit()
        let result:any = res
        intitle.value = result.defaultKeyword.keyword
        hotlist.value =  result.hotKeywordVOList
    } catch (error) {
        console.log(error);    
    }
}
onMounted(() => {
    init()
})
</script>

<style lang="less" scoped>
.search {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;

    .searchTop:deep(.van-search__content) {
        background-color: #f4f4f4;
    }
    .input{
            width:235px ;
        }
    
    .search_hot {
        margin-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        background-color: #fff;

        .searchCtn {
            background-color: #fff;
        }

        .title {
            line-height: 75px;
            font-size: 14px;
            margin-left: 25px;
            margin-top: -10px;
            color: #999;


        }

        .hd {
            color: #999;
            line-height: 75px;
            font-size: 14px;
            margin-left: 25px;
            margin-top: -10px;
            color: #999;
            padding-right: 10px;

            width: 368.38px;
        }
    }

    .msearchSuggestionsViews {
        width: 100%;
        height: 251.800px;
    }

    .kong {
        width: 100%;
        height: 10px;
    }

    .list {
        width: 360.2px;
        margin-right: 15px;
        margin-bottom: 15px;
    }

    .searchtag {
        width: 36.63px;
        height: 24.6px;
        padding-left: 7.500px;
        padding-right: 7.500px;
        margin-right: 16px;
        margin-left: 16px;
        border: 1px solid #999;
        border-radius: 4px;
        color: #333;
        font-size: 12px;
        height: 24.6px;
        line-height: 23px;
    }
}

.suggestion {
    background-color: #fff;

    ul {
        width: 375.2px;
        padding-left: 15px;
    }

    .col {
        width: 360px;
        padding: 7px;
        color: #333333;
        height: 38px;
        font-size: 14px;
        // font-weight: 400px;
        height: 38px;
        line-height: 38px;
        text-align: left;
        vertical-align: baseline;
        display: inline-block;
        border-bottom: #d9d9d9 1px solid;
        white-space: nowrap;

        .line_box {
            display: flex;
            align-items: center;
            .spans {
            width: 320px;
            height: 38px;
            // font-weight: 300;
            // border: 1px solid #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        img {
            width: 25px;
            height: 25px;
        }
        }

       
    }
}

.searchtop {
    display: flex;

    height: 24px;
    padding: 6px 10px;
    font-size: 12px;
    justify-content: center;
    font-weight: 400;
    vertical-align: baseline;
    background-color: #fff;

    .search1 {
        display: flex;
        flex-grow: 1;
        align-self: center;
        border-radius: 3px;
        background-color: #ededed;
        justify-content: center;
        padding-left: 8px;
        padding-right: 3px;
        cursor: pointer;

    }

    input {
        width: 266.2px;
        background-color: transparent;
        border: none;

    }

    span {
        width: 24px;
        height: 12px;
        margin-left: 10px;
        line-height: 12px;
        align-self: center;
    }
}
</style>